<template>
   <div class="wrapper index-banner">
       <yd-slider 
      
       autoplay="3000">
        <yd-slider-item  
        v-for="item of list" 
       :key="item.id">
            <a :href="item.url">
                <img :src="item.img.url">
            </a>
        </yd-slider-item>
       
        
        
    </yd-slider>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'Banner',
  data () {
    return {
      msg: 'index',
      id:8,
      list:[],
     
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    // console.log(this.baseUrl)
    this.getInfo()
    
  },
  methods: {
    getInfo(){
      // console.log(this.baseUrl)
      axios.get(this.baseUrl+'banner/'+this.id,
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
      // console.log(response)
      this.list = response.data.items
    }
  },
}
</script>

<style lang="stylus" scoped>
@import "~@styles/varibles.styl"
@import "~@styles/mixins.styl"
.index-banner
  // height 4.2rem 
img 
  width 100%
  // height 4.2rem 
</style>
